<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-form-item .layui-inline{ min-width:15%; float:left; margin-right:0; }
        .layui-form-item .role-box {
            position: relative;
        }
    </style>
</head>
<body>
<form  class="layui-form layuimini-form">

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin-left: 10px;">
            <legend>角色名称(<span style="color:red">*</span>)</legend>
        </fieldset>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="width: 80%">
            <input type="text" class="layui-input" name="name" style="margin-top: 30px;" lay-verify="required" placeholder="请想一个角色名称">
        </div>
    </div>
    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin-left: 10px;">
            <legend>备注</legend>
        </fieldset>
    </div>

    <div class="layui-form-item layui-form-text">
        <div class="layui-input-block" style="width: 80%">
            <textarea placeholder="一些可有可无的备注罢了.." name="remarks" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;margin-left: 10px;">
            <legend>请分配角色权限</legend>
        </fieldset>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block layui-header-rolemenu" style="width: 80%">
            <!--这里放遍历菜单-->
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="addRole">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../api/baseApi.js" charset="utf-8"></script>
<script src="../../api/roleApi.js" charset="utf-8"></script>
<script>
    Array.prototype.contains = function ( needle ) {
        for (i in this) {
            if (this[i] == needle) return true;
        }
        return false;
    };

    layui.use(['form','element'], function () {
        let form = layui.form,
            layer = layui.layer,
            element = layui.element,
            $ = layui.$;

            const token = localStorage.getItem('token');
        //ajax全局参数设置
        $.ajaxSetup({
            headers:{
                Authorization: 'Bearer '+token
            },
            // 发送cookie
            xhrFields: {
                withCredentials: true
            }
        });

        //获取所有菜单数据
        function getAllMenus(){
            $.get({
                url: getAllMenusListUrl,
                dataType: "json",
                timeout:300000,
                xhrFields:{withCredentials: true},
                success: function (res) {
                    if(res.success){
                        initMenu(res.data);
                    }else{
                        layer.msg(res.message);
                    }
                },
                error: function () {

                }
            });
        }
        getAllMenus();

        /**
         * 递归创建无限菜单
         * @param child
         */
        function buildMenu(child) {
            let childMenuHtml = '';
            $.each(child, function (childIndex, childMenu) {
                childMenuHtml += '<div class="layui-inline">\n';

                if (childMenu.children != undefined && childMenu.children.length>0) {
                    childMenuHtml += '<li style="margin-top: 5px;margin-left: 1.5em"><input type="checkbox" title="' + childMenu.name + '" value="' + childMenu.id + '" data-parentIds = "' + childMenu.parentIds + '"  lay-filter="roleMenu" />\n';
                    childMenuHtml += ' <ul class="layui-child-menu">\n';
                    //递归
                    childMenuHtml += buildMenu(childMenu.children);
                    childMenuHtml += ' </ul>\n';
                    childMenuHtml += ' </li>\n';
                } else {
                    childMenuHtml += ' <li style="margin-top: 5px;margin-left: 1.5em"><input type="checkbox" title="' + childMenu.name + '" value="' + childMenu.id + '" data-parentIds = "' + childMenu.parentIds + '"  lay-filter="roleMenu" /></li>\n';
                }

            });
            return childMenuHtml;
        }

        //初始化菜单栏
        function initMenu(data){
            let headerMenuHtml = '';
            //遍历菜单data
            $.each(data,function (index,menu) {
                headerMenuHtml += '<div class="layui-inline">\n';
                headerMenuHtml += '<fieldset class="layui-elem-field">\n';
                headerMenuHtml += '<legend><input type="checkbox"  value="' + menu.id + '" data-parentIds = "' + menu.parentIds + '"   title="' + menu.name + '" lay-filter="roleMenu" /></legend>\n';
                headerMenuHtml += '<div class="layui-field-box">\n';
                headerMenuHtml += '<ul class="layui-child-menu" style="padding: 0 15px">\n';

                //递归
                headerMenuHtml += buildMenu(menu.children);
                headerMenuHtml += '</ul>\n';
                headerMenuHtml += '</div>\n';
                headerMenuHtml += '</fieldset>\n';
                headerMenuHtml += '</div>\n';
            });

            $('.layui-header-rolemenu').html(headerMenuHtml);
            form.render('checkbox');
        }


        //监听提交
        form.on('submit(addRole)', function (data) {
            let loadIndex = layer.load(2, {
                shade: [0.3, '#333']
            });

            let menus = [];
            let  c = $('form').find('input[type="checkbox"]');
            c.each(function (index,item) {
                let m = {};
                if(item.checked){
                    m.id = parseInt(item.value);
                    menus.push(m);
                }
            });
            data.field.menuSet = menus;

            $.post({
                url: addUrl,
                data:JSON.stringify(data.field),
                dataType: "json",
                timeout:300000,
                contentType:"application/json",
                xhrFields:{withCredentials: true},
                success: function (res) {
                    layer.close(loadIndex);
                    if(res.success){
                        parent.layer.msg("角色添加成功！",{time:1000},function(){
                            //刷新父页面
                            parent.location.reload();
                        });
                    }else{
                        layer.msg(res.message);
                    }
                },
                error: function () {

                }

            });


            return false;
        });

    });
</script>
</body>
</html>
